<!--
 * @Autor: ZN
 * @LastEditors: ZN
 * @Date: 2023-04-27 16:51:27
 * @LastEditTime: 2023-05-11 10:33:24
 * @Description: 首页第二个echarts 图
-->
<template>
  <div class="chart-content">
    <charts :options="option"></charts>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import charts from "@/components/common/charts.vue";
import { getPieCharts } from "@/service/home/home";

const option = ref({
  tooltip: {
    trigger: "item",
  },
  legend: {
    show: false,
  },
  series: [
    {
      name: "",
      type: "pie",
      roseType: "area",
      // radius: ['60%', '40%'],
      radius: ["10%", "80%"],
      center: ["50%", "50%"],
      label: {
        color: "#000",
        fontFamily: "Albbpht",
      },
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});

// 请求数据
const getData = async () => {
  let result = await getPieCharts();
  option.value.series[0].data = result.data.data;
};
getData();
</script>

<style scoped lang="scss">
.chart-content {
  width: 100%;
  height: 100%;
}
</style>
